<template>
  <div class="sellers" ref="sellers">
    <div class="seller-content">
      <div class="overview">
        <h1 class="name">{{seller.name}}</h1>
        <div class="star-show">
          <star class="star36" :size="36" :score="seller.score"></star>
          <span class="text">({{seller.ratingCount}})</span>
          <span class="text">月售{{seller.sellCount}}单</span>
        </div>
        <div class="favorite" @click="favorite()">
          <div class="icon-favorite" :class="{'active':favoriteType}"></div>
          <span class="text" :class="{'active':favoriteType}">{{favoriteText}}</span>
        </div>
      </div>
      <ul class="remark">
        <li class="block">
          <div class="title">起送价</div>
          <div class="content">
            <span class="number">{{seller.minPrice}}</span>
            <span class="unit">元</span>
          </div>
        </li>
        <li class="block">
          <div class="title">商家配送</div>
          <div class="content">
            <span class="number">{{seller.deliveryPrice}}</span>
            <span class="unit">元</span>
          </div>
        </li>
        <li class="block">
          <div class="title">平均配送时间</div>
          <div class="content">
            <span class="number">{{seller.deliveryTime}}</span>
            <span class="unit">分钟</span>
          </div>
        </li>
      </ul>
      <port-split></port-split>
      <div class="bulletin">
        <div class="title">公告与活动</div>
        <p class="text">{{seller.bulletin}}</p>
        <ul class="supports" v-if="seller.supports">
          <li class="support-item" v-for="item of seller.supports" :key="item.type">
            <span class="icon" :class="classMap[item.type]"></span>
            <span class="desc">{{item.description}}</span>
          </li>
        </ul>
      </div>
      <port-split></port-split>
      <div class="pics">
        <h1 class="title">商家实景</h1>
        <div class="pic-wapper" ref="pics">
          <ul class="pic-list" ref="picList">
            <li class="pic-item" v-for="(pic, index) of seller.pics" :key="index" @click="gallary(index)">
              <img :src="pic" width="120" height="90">
            </li>
          </ul>
        </div>
      </div>
      <port-split></port-split>
      <div class="info">
        <h1 class="title">商家信息</h1>
        <ul>
          <li class="info-item" v-for="(info, index) of seller.infos" :key="index">
            {{info}}
          </li>
        </ul>
      </div>
    </div>
    <transition enter-active-class="animated fadeIn">
      <common-gallary @closeGallary="closeGallary" :imgs="seller.pics" v-if="showGallary" :initialSlide="initialSlide"></common-gallary>
    </transition>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
import PortSplit from 'common/split/PortSplit'
import Star from 'common/star/Star'
import { saveToLocal, loadFromLocal } from '@/assets/js/localStorage'
import CommonGallary from 'common/gallary/Gallary'

export default {
  name: 'SellSellers',
  components: {
    CommonGallary,
    Star,
    PortSplit
  },
  props: {
    seller: {
      type: Object,
      default () {
        return {}
      }
    },
    ratings: {
      type: Array,
      default () {
        return []
      }
    },
    goods: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      favoriteType: false,
      showGallary: false,
      initialSlide: 0
    }
  },
  created () {
    this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
  },
  mounted () {
    this.pageScroll()
    this.picWidth()
    this.favoriteType = loadFromLocal(this.seller.id, 'favorite', false)
  },
  watch: {
    seller () {
      this.pageScroll()
      this.picWidth()
      this.favoriteType = loadFromLocal(this.seller.id, 'favorite', false)
    }
  },
  methods: {
    pageScroll () {
      if (!this.pgScroll) {
        this.pgScroll = new BScroll(this.$refs.sellers, {
          click: true
        })
      }
    },
    picScroll () {
      if (!this.pcScroll) {
        this.pcScroll = new BScroll(this.$refs.pics, {
          scrollX: true,
          click: true,
          eventPassthrough: 'vertical'
        })
      }
    },
    picWidth () {
      if (this.seller.pics) {
        let picW = 120
        let picBor = 6
        let totalW = (picW + picBor) * this.seller.pics.length
        let list = this.$refs.picList
        list.style.width = totalW + 'px'
        this.picScroll()
      }
    },
    favorite () {
      this.favoriteType = !this.favoriteType
      saveToLocal(this.seller.id, 'favorite', this.favoriteType)
    },
    closeGallary () {
      this.showGallary = false
    },
    gallary (idx) {
      this.showGallary = true
      this.initialSlide = idx
    }
  },
  computed: {
    favoriteText () {
      return this.favoriteType ? '已收藏' : '收藏'
    }
  }
}
</script>
<style lang="stylus" scoped>
@import "~styles/mixin.styl"
.sellers
  position absolute
  top 3.54rem
  bottom 0
  width 100%
  overflow hidden
  .seller-content
    .overview
      margin 0 .36rem
      padding-top .36rem
      border-bottom .01rem solid rgba(7, 17, 27, 0.1)
      .name
        font-size .28rem
        font-weight 700
        color rgb(7, 17, 27)
        line-height .28rem
        margin-bottom .16rem
      .favorite
        position absolute
        top .36rem
        right .36rem
        text-align center
        color #c5c9ce
        width 1rem
        height 1rem
        .icon-favorite
          font-size .48rem
          line-height .48rem
          margin-bottom .08rem
          &.active
            color rgb(240, 20, 20)
        .text
          font-size .2rem
          &.active
            color rgb(77, 85, 93)
      .star-show
        font-size 0
        margin-bottom .36rem
        .star36
          display inline-block
          vertical-align top
          margin-right .16rem
        .text
          font-size .2rem
          color rgb(77, 85, 93)
          margin-right .24rem
          vertical-align top
    .remark
      display flex
      padding .36rem 0
      .block
        flex 1
        text-align center
        border-right 0.01rem solid rgba(7, 17, 27, 0.1)
        font-size 0
        &:last-child
          border none
        .title
          font-size .2rem
          color rgb(147, 153, 159)
          line-height .2rem
          margin-bottom .12rem
        .number,.unit
          line-height .48rem
          font-weight 200
          color rgb(7, 17, 27)
        .number
          font-size .48rem
        .unit
          font-size .2rem
          font-weight 100
    .bulletin
      margin .36rem .36rem 0 .36rem
      .title
        font-size .28rem
        font-weight 700
        color rgb(7, 17, 27)
        line-height .28rem
        margin-bottom .16rem
      .text
        font-size .24rem
        line-height .48rem
        font-weight 200
        color rgb(240, 20, 20)
        padding 0 .24rem
      .supports
        margin-top .32rem
        .support-item
          padding .32rem .24rem
          border-top 0.01rem solid rgba(7, 17, 27, 0.1)
          font-size 0
          .icon
            vertical-align top
            display inline-block
            width .32rem
            height .32rem
            margin-right .12rem
            background-size .32rem .32rem
            background-repeat no-repeat
            &.decrease
              bg-image('img/decrease_4')
            &.discount
              bg-image('img/discount_4')
            &.guarantee
              bg-image('img/guarantee_4')
            &.invoice
              bg-image('img/invoice_4')
            &.special
              bg-image('img/special_4')
          .desc
            font-size .24rem
            line-height .32rem
    .pics
      margin .36rem 0 .36rem .36rem
      .title
        font-size .28rem
        font-weight 700
        color rgb(7, 17, 27)
        line-height .28rem
        margin-bottom .24rem
      .pic-wapper
        .pic-list
          height 1.8rem
          overflow hidden
          white-space nowrap
          .pic-item
            display inline-block
            width 2.4rem
            height 1.8rem
            margin-right .12rem
    .info
      margin .36rem .36rem 0 .36rem
      padding-bottom .36rem
      color rgb(7, 17, 27)
      .title
        font-size .28rem
        font-weight 700
        line-height .28rem
        margin-bottom .24rem
      .info-item
        padding .32rem .24rem
        font-size .24rem
        font-weight 200
        line-height .32rem
        border-top 0.01rem solid rgba(7, 17, 27, 0.1)
</style>
